<template>
  <page-wrap scrollType="bs" :initBs="initBs" :load="loadData">
    <template #extension>
      <TimeChange @select="onSelectTimeChange"></TimeChange>
    </template>
    <div class="records-container">
      <div class="records-container-main" v-if="roomOpeHistory.length">
        <div
          class="container-main-item"
          v-for="(item, index) in roomOpeHistory"
          :key="index"
          @click="goTodetail(item.consumeCode)"
        >
          <div class="item-header">
            <div class="item-time">
              {{ dayjs(item.crDate).format('YYYY-MM-DD') }}
              {{ dayjs(item.crDate).format('HH:mm:ss') }}
            </div>
            <!-- <div class="item-state" :class="getItemClass(item.state)">
              {{ item.state }}
            </div> -->
            <div class="item-state">
              {{ item.stateName }}
            </div>
          </div>
          <div class="item-main">
            <div class="item-main-cell">
              <div class="cell-left">台单号：{{ item.consumeCode }}</div>
              <div class="cell-right">操作人：{{ item.waiterUserName?item.waiterUserName:'-- --' }}</div>
            </div>
            <div class="item-main-cell">
              <div class="cell-left spe">操作详情：
                <div v-for="(v,k) in item.remark" :key="k" class="cell-left-remark">{{ v }}</div>
              </div>
             
            </div>
            <!-- <div class="item-main-cell">
              <div class="cell-left">订台人：{{ item.maintainUserName?item.maintainUserName:'-- --' }}</div>
              <div class="cell-right">
                <span>低消：</span><span v-if="item.minConsume">￥</span>{{ formatNumber(item.minConsume)?formatNumber(item.minConsume):'-- --' }}
              </div>
            </div>
            <div class="item-main-cell">
              <div class="cell-left">操作人：{{ item.waiterUserName?item.waiterUserName:'-- --' }}</div>
              <div class="cell-right">
                实消：￥{{ formatNumber(item.realAmt) }}
              </div>
            </div>
            <div class="item-main-cell" v-if="item.stateName === '转台'">
              <div class="cell-left" v-if="item.beforeRoomName">由 {{ item.beforeRoomName }} 转至 {{ item.afterRoomName }} </div>
            </div>
            <div class="item-main-cell" v-if="item.stateName === '并台'">
              <div class="cell-left">由 {{ item.beforeRoomName }} 并至 {{ item.afterRoomName }} </div>
              <div class="cell-left"></div>
            </div> -->
          </div>
        </div>
      </div>
      <div v-else>
        <z-empty type="data"></z-empty>
      </div>
    </div>
    <template #footer>
      <z-button-group :flex="true" style="padding: 20px 12px">
        <z-button
          top="20"
          :plain="true"
          style="flex: 25%;margin-right:10px"
          @click="onPanel('cancel')"
          >取消</z-button
        >
        <!-- <z-button
          style="margin: 20px 10px 0px 10px; flex: 50%"
          @click="onPanel('return')"
          :disabled="canUse"
          >复台</z-button
        > -->
        <z-button top="20" style="flex: 25%;margin-left:10px" @click="onPanel('detail')"
          >详情</z-button
        >
      </z-button-group>
    </template>
  </page-wrap>
</template>
<script setup>
import { ref, reactive } from 'vue'
import ls from '@/lib/ls'
import { useRoute, useRouter } from 'vue-router'
import useAppStore from '@/store/app'
import { NavBar, Button, Popover, showToast } from 'vant'
import dayjs from 'dayjs'
import { ZButton, ZButtonGroup } from '@/components/Button'
import Api from '@/api'
import { transformWorkTime } from '@/utils/chenhao'



const appStore = useAppStore()
const route = useRoute()
const router = useRouter()
// const roomName = route.query.roomName
const params = route.query
onMounted(() => {
  // 根据传递的房间号改标题
  const targetElement = document.querySelector('.z-page-header-title')
  targetElement.innerHTML = route.query.roomName
  //（只有空闲状态才可以复台）
  if (params.consumeState === '0') {
    canUse.value = false
  }
})

const roomOpeHistory = ref([])
const canUse = ref(true) // 复台按钮权限（只有空闲状态才可以复台）
onMounted(() => {})
//------------------------------------------------------时间筛选--------------------------------------------------------------------
const onSelectTimeChange = (startTime, endTime) => {
  postForm.stratDate = startTime
  postForm.endDate = endTime
  loadData(true)
}
//表单
const postForm = reactive({
  roomCode: route.query.roomCode,
  stratDate: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[0],
  endDate: transformWorkTime('今日',appStore.getReportTime.startTime,appStore.getReportTime.endTime)[1],
  pageIndex: 1,
  pageSize: 15
})

// 开台样式
// function getItemClass (item) {
//   if (item === '开台') {
//     return 'state-1'
//   } else if (item === '复台') {
//     return 'state-2'
//   }
// }
// ----------------------------------------------------------------------保留两位小数--------------------------------------------------
function formatNumber (num) {
  if (num) {
    return num.toFixed(2)
  } else {
    return 0
  }
}
// -------------------------------------------------------加载  下拉刷新---------------------------------------------------------
const loading = ref(false)
const finished = ref(false)
const initBs = ref(0)
const loadData = async function (refresh = false) {
  if (refresh === true) {
    postForm.pageIndex = 1
    roomOpeHistory.value = []
    finished.value = false
  }
  loading.value = true
  const resp = Api.Common.AppObjProcess.Do({
    functionName: 'GetRoomOpeHistory',
    contentData: postForm
  })
    .then(res => {
      let nowList = res.result
      console.log(nowList);

      nowList = nowList.map(item => {
        const arr = []
        let lines = ''
        if(item.remark){
          lines = item.remark.split(/;/g);
        }
        
        // 使用 replace 方法将 remark 属性中的分号替换为换行符
        // const updatedRemark = item.remark.replace(, '');
        return { ...item, remark: lines };
      });
      console.log(nowList);
      if (refresh === true) {
        if (nowList.length !== postForm.pageSize) {
          finished.value = true
        }
      }

      Array.prototype.push.apply(roomOpeHistory.value, nowList)
      if (nowList.length > 0) {
        postForm.pageIndex++
      } else {
        finished.value = true
      }
      loading.value = false
      if (refresh === true) {
        initBs.value++
      }
      console.log(roomOpeHistory.value);
      
    })
   
}
//----------------------------------底部按钮----------------------------------------
// 控制台
const onPanel = type => {
  switch (type) {
    case 'cancel':
      router.back()
      break
    case 'return': // 复台
 
      Api.Common.AppObjProcess.Do({
        functionName: 'RoomRest',
        contentData: { roomCode: postForm.roomCode }
      })
        .then(res => {
          showToast('复台成功')
          router.push({
            path: '/open'
        })
        })
    
      break
    case 'detail':
      router.push({
        path: `/open/table`,
        query: {
          roomCode: route.query.roomCode,
          roomName: route.query.roomName,
          stratDate: postForm.stratDate,
          endDate: postForm.endDate
        }
      })
      break
  }
}
//---------------------------------------------------------------------------调跳转详情--------------------------------------------------
const goTodetail = val => {
  router.push({
    path: `/open/table`,
    query: {
      roomCode: route.query.roomCode,
      roomName: route.query.roomName,
      consumeCode: val
    }
  })
}
//-----
// -----------------------------------------------------初始化--------------------------------------------------
const onInit = () => {
  loadData(true)
}
onInit()
</script>
<style scoped lang="scss">
.records-container {
  padding: 10px 12px 0 12px;

  .records-container-main {
    .container-main-item {
      background: #28282e;
      border-radius: 8px;
      font-family: PingFang SC;
      font-weight: 500;
      padding-bottom: 7px;
      margin-bottom: 10px;
      .item-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 10px;
        .item-time {
          font-size: 12px;
          color: #ffffff;
          line-height: 24px;
          padding: 20px 0 0 11px;
        }
        .item-state {
          // background: #3c3933;
          // border-radius: 4px;
          // font-size: 16px;
          // color: #ffaa00;
          // line-height: 16px;
          // padding: 5px 10px 4px 10px;
          // margin: 12px 12px 10px 0;

          font-size: 13px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #999999;
          line-height: 13px;
          padding: 4px 18px;
          background: #383840;
          border-radius: 0px 8px 0px 8px;
          // &.state-1 {
          //   color: #ffaa00;
          // }
          // &.state-2 {
          //   color: #ff6a00;
          // }
        }
      }
      .item-main {
        .item-main-cell {
          display: flex;
          //   justify-content: space-between;
          font-size: 14px;
          color: #cccccc;
          line-height: 14px;
          margin-bottom: 10px;
          .cell-left {
            flex: 60%;
            padding: 0 0 0px 12px;
            .cell-left-remark{
              padding-left: 12px;
            }
          }
          .spe{
            padding-right: 10px;
            line-height: 26px;
          }
          .cell-right {
            flex: 40%;
            padding: 0 0px 13px 0;
          }
        }
      }
    }
  }
}
</style>
